
import React, {Component} from 'react';
import {StyleSheet, Text, View, TextInput, Button} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import NavigationUtil from '../../../navigator/NavigationUtil.js'
import actions from "../../../redux/action";
import {connect} from "react-redux";

type Props = {};
class Login extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }
  shouldComponentUpdate(nextProps, nextState){
    console.log(nextProps)
    // console.log(nextState)
    if(nextProps.login.login && nextProps.login.login.success){
      NavigationUtil.resetToHomePage({
        navigation: this.props.navigation
      })
    }
    return true
  }

  login(){
    const {onLogin} = this.props;
    let formData = new FormData();
    formData.append('username', this.username);
    formData.append('password', this.password);
    console.log(formData)
    onLogin(formData)
  }
  render() {
    return (
      <KeyboardAwareScrollView>
        <View style={styles.container}>
          <View style={styles.loginForm}>
            <Text style={styles.loginTitle}>登录</Text>
            <View style={styles.loginItem}>
              <Text style={styles.loginLabel}>手机号</Text>
              <View>
                <TextInput
                  placeholder = {'请输入手机号码'}
                  style={styles.loginTel}
                  onChangeText={text => {
                    this.username = text;
                  }}
                />
              </View>
            </View>
            <View style={styles.loginItem}>
              <Text style={styles.loginLabel}>密码</Text>
              <TextInput
                placeholder = {'请输入登录密码'}
                style={styles.loginPwd}
                onChangeText={text => {
                  this.password = text;
                }}
              />
            </View>
            <View style={styles.loginItem}>
              <Button
                title="登录"
                color="#CCCCCC"
                style={styles.loginBtn}
                onPress={() => {
                  this.login()
                }}
              />
            </View>
            <View style={styles.loginFooter}>
              <Text 
                style={styles.forgetPwd}
                onPress={() => {
                  NavigationUtil.resetToForgetPwdPage({
                    navigation: this.props.navigation
                  })
                }}
              >忘记密码</Text>
              <Text 
                style={styles.userRegist}
                onPress={() => {
                  NavigationUtil.resetToRegistPage({
                    navigation: this.props.navigation
                  })
                }}
              >注册</Text>
            </View>
          </View>
        </View>
      </KeyboardAwareScrollView>
    );
  }
}

const mapStateToProps = state => ({
  login: state.login,
});
const mapDispatchToProps = dispatch => ({
  onLogin: (params) => dispatch(actions.onLogin(params))
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);
const styles = StyleSheet.create({
  container: {
    height: '100%',
    backgroundColor: '#fff',
  },
  loginForm: {
    padding: 27,
    paddingTop: 113,
  },
  loginTitle: {
    color: '#282828',
    fontSize: 38,
  },
  loginItem: {
    marginTop: 37
  },
  loginLabel: {
    color: '#666666',
    fontSize: 16,
  },
  loginTel: {
    height: 43,
    borderColor: '#F4F4F4',
    borderBottomWidth: 1,
    color: '#D8D8D8'
  },
  loginPwd: {
    height: 43,
    borderColor: '#F4F4F4',
    borderBottomWidth: 1,
    color: '#D8D8D8'
  },
  loginBtn: {
    marginTop: 37,
  },
  loginFooter: {
    flex: 1,
    marginTop: 37,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  forgetPwd: {
    flex: 1
  },
  userRegist: {
    flex: 1,
    textAlign: 'right'
  }
});
